<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include :: header('文章模板列表')" />
</head>
<body class="gray-bg">
    <div id="main" class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div id="c1" class="col-sm-4">
               

            </div>
            <div  id="c2" class="col-sm-4">

            </div>
            <div  id="c3" class="col-sm-4">

            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />

    <script type="text/javascript">
        var prefix = ctx + "cms/articleTemplate";
        var pageNum=1;
        var url = prefix + "/list";
        var totalPages;
        function selectMinColumn(){
            var h1=$("#c1").height();
            var h2=$("#c2").height();
            var h3=$("#c3").height();
            var arr=[];
            arr.push(h1);
            arr.push(h2);
            arr.push(h3);
            var minData= arr[0];
            var index=0;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i]<minData) {
                    minData = arr[i];  // 最小值
                    index=i;
                }
            }
            return "c"+(index+1);//返回高度最小的元素id

        }
        function initList(){
            $.ajax({
                url: url+"?pageNum="+pageNum,
                type: "post",
                dataType: "json",
                data: null,
                success: function(json) {
                    if(json.code!=0&&json.code!='0'){
                        $.modal.alertWarning(json.msg);
                    }else{
                        totalPages=(json.total+9)/10;
                        var data=json.rows;
                        $.each(data,function(i,v){
                            var html="";
                            html+=" <div class=\"ibox\">" +
                                "                    <div class=\"ibox-title\">" ;
                                    if(v.hotFalg==1){
                                        html+= "                        <span class=\"label label-danger pull-right\">HOT</span>" ;
                                    }else if(v.newFlag==1){
                                        html+= "                        <span class=\"label label-primary pull-right\">NEW</span>" ;
                                    }else{
                                        html+= "                        <span class=\"label label-primary pull-right\"></span>" ;
                                    }

                            html+= "                        <h5>"+v["name"]+"</h5>" +
                                "                    </div>" +
                                "                    <div style='padding: 8px 20px 20px 20px;' class=\"ibox-content\">" +
                                "                        <h4>效果预览:</h4>" +
                                "                        <p>" +v["content"]+"</p>" +
                                "                        <div style='    border-top: 1px solid #ddd;    padding-top: 20px;' class=\"row  m-t-sm\">" +
                                "                            <div class=\"col-sm-6\">" +
                                "                                作者：<div style=\"display: inline-block\" class=\"font-bold\">markbro</div>" +
                                "                            </div>" +
                                "                            <div class=\"col-sm-6 text-right\">" +
                                "                                日期：<div style=\"display: inline-block\"  class=\"font-bold\">2019年12月31日</div>" +
                                "                            </div>" +
                                "                        </div>" +
                                "                    </div>" +
                                "                </div>";

                            var id=selectMinColumn();
                            $("#"+id).append(html);
                        });
                    }
                }
            });
        }
        $(function(){
            initList();
            //alert(selectMinColumn());
            $(window).scroll(

                function() {
                    var scrollTop = $(this).scrollTop();
                    var scrollHeight = $(document).height();
                    var windowHeight = $(this).height();
                    if (scrollTop + windowHeight == scrollHeight) {
                        pageNum++;
                        if(pageNum>totalPages){
                            layer.msg("已经加载了全部数据!");
                        }else{
                            initList();
                        }

                    }
                });
        })
    </script>
</body>
</html>
